<template>
    <div class="box">
        <div class="top">
            <span>是否推荐:</span>
            <el-radio-group v-model="radio">
                <div class="mc">
                    <el-radio :label="3" :change="show">是</el-radio>
                    <el-radio :label="6">否</el-radio>
                </div>
            </el-radio-group>
        </div>
        <div class="bootom">
            <span>推荐图片</span>
                <el-upload
                    class="upload-demo"
                   
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture"
                >
                    <el-button size="80px"  type="primary" 
                        >选择文件</el-button
                    >
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不能超过500kb
                        </div>
                    </template>
                </el-upload>
            
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
    data() {
        return {
            radio: ref(2),
            fileList: [
                {
                    name: "food.jpeg",
                    url:
                        "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
                }
            ]
        };
    },
    created() {},
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
    }
});
</script>

<style scoped>
.top {
    display: flex;
}
.bootom{
    display: flex;
    flex-direction: column;
    justify-content: center
}
span {
    padding: 10px;
}
.bootom{
    padding-top:30px ;
}
.el-upload-list--picture .el-upload-list__item{
    width: 1875px;
   background-color: #040929!important;
   z-index: 777;
}
</style>
